import { Component, OnInit, ViewChild , ViewEncapsulation} from '@angular/core';
import { kMaxLength } from 'buffer';
import { CoreComponent } from 'pengesoft-ng-lib';
import { NzTableModule } from 'ng-zorro-antd/table';
import {
  FormBuilder,
  FormControl,
  FormGroup,
  ValidationErrors,
  Validators,
} from '@angular/forms';
import { from, Observable, Observer } from 'rxjs';
import {
  NzFormatEmitEvent,
  NzTreeComponent,
  NzTreeNodeOptions,
} from 'ng-zorro-antd/tree';

interface ItemData {
  id: number;
  roleName: string;
  Authority: string;
  status: boolean ;

}

@Component({
  selector: 'app-roler-management',
  templateUrl: './roler-management.component.html',
  styleUrls: ['./roler-management.component.less'],
})

export class RolerManagementComponent implements OnInit {
  inputValue?: string;     // 搜索框值
  filteredOptions: string[] = [];
  options = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
  listOfData: { id: number; roleName: string; Authority: string; }[];
  info: ItemData;
  chooseOne: string;  // 新增角色 or 修改
  isVisible1 = false;   // 新增用户模态框开关
  isVisible2 = false;   // 修改权限
  radioValue = 'on';    // 角色默认
  validateForm!: FormGroup;
  showModal(i, data?: any): void {    // 打开新增抽屉
    if (i === 1) {
      this.isVisible1 = true;
      this.chooseOne = '新增角色';
    }
    if (i === 2) {
      this.isVisible1 = true;
      this.chooseOne = '修改角色';
      this.info = data;
      this.validateForm = this.fb.group({
        id: [this.info.roleName, Validators.required],
        roleName: [this.info.roleName, Validators.required],
        password: [this.info.roleName, Validators.required],
        Authority: [this.info.Authority, Validators.required],
        status: [this.info.status, Validators.required],
        radioValue: ''
      });
    }
    if (i === 3) {
      this.isVisible2 = true;
    }
  }

    // 新增角色模态框 确定
    handleOk(i): void {
      if ( i === 1){
        this.isVisible1 = false;
      }else if ( i === 2){
        this.isVisible2 = false;
      }
    }
  // 新增角色模态框 取消
    handleCancel(i): void {
      if ( i === 1){
        this.isVisible1 = false;
      }else if ( i === 2){
        this.isVisible2 = false;
      }
    }
    onInput(event: Event): void {
      const value = (event.target as HTMLInputElement).value;
      // this.options = value ? [value, value + value, value + value + value] : [];
    }
  submitForm(): void {
    // tslint:disable-next-line: forin
    for (const i in this.validateForm.controls) {
      this.validateForm.controls[i].markAsDirty();
      this.validateForm.controls[i].updateValueAndValidity();
    }
  }
  constructor(private fb: FormBuilder) {}



  // 搜索框
  onChange(value: string): void {
    this.filteredOptions = this.options.filter(option => option.toLowerCase().indexOf(value.toLowerCase()) !== -1);
  }
  deleteRow(id: string): void {
    this.listOfData = this.listOfData.filter((d) => d.id !== Number(id));
  }
  ngOnInit(): void {
      // 用户展示 start
      this.listOfData = new Array(15).fill(0).map((_, index) => {
        return {
          id: index,
          roleName: `你好 ${index}`,
          Authority: `招聘管理 员工管理 组织管理`,
        };
      });
      // 用户展示 end
      this.validateForm = this.fb.group({
        id: [null, Validators.required],
        roleName: [null, Validators.required],
        password: [null, Validators.required],
        Authority: [null, Validators.required],
        status: [true, Validators.required],
        radioValue: ''
      });
    }
}
